<template>
    <section class="contentCon">
           <div>
            <el-button type="primary" style="position:relative;float:left;z-index:20" @click="goSeeAnalysis">深度数据查看</el-button><el-button type="primary" style="position:relative;float:left;z-index:20" @click="gotoseedata">原始数据查看</el-button>
            <el-carousel height="200px" direction="vertical" :autoplay="true" style="width:700px;height: 50px;float: left;margin-left:20px;" :interval="3000">
            <el-carousel-item v-for="item in alarmItems">
              <h3 class="medium"><div class="happen-img"><img v-if="item.type==2" src="@/assets/smoke_fault.png"></img><img v-else-if="item.type==3" src="@/assets/smoke_alert.gif"></img><img v-else-if="item.type==1" src="@/assets/smoke_normal.png"></img></div><p class="happen-status" v-if="item.title=='设备无登录异常'">无多次登录异常</p><p v-else class="happen-status"  v-bind:class="{'alert':item.type==3,'fault':item.type==2}">请注意！发生{{item.title}}  {{utils.timestampToTime(item.timestamp)}}</p></h3>
              <el-button type="primary" plain style="margin-left:20px;" v-if="item.title=='设备多次登录异常'||item.title=='设备无登录异常'" @click="gotoSeeLoginLog">查看登录日志</el-button>
            </el-carousel-item>
          </el-carousel>
          <el-button type="danger" style="position:relative;float:right;z-index:20" @click="deleteDevice">注销设备</el-button>
           <div class="clear"></div>
            </div>
          <el-card shadow="always">
              <div class="info-card">
                    <h3 class="info-card-title">基本信息</h3>
                    <div class="info-body">
                        <div class="color-container">
                            <div class="row-item"><label class="row-item__label"> 设备名称: </label><div class="row-item__content" ><span>{{devBaseInfo.deviceName}}</span></div></div>
                            <div class="row-item"><label class="row-item__label"> 设备编码: </label><div class="row-item__content" ><span>{{devBaseInfo.deviceId}}</span></div></div>
                            <div class="row-item"><label class="row-item__label"> IMEI: </label><div class="row-item__content" ><span>{{devBaseInfo.imei}}</span></div></div>
                            <div class="row-item"><label class="row-item__label"> IMSI: </label><div class="row-item__content" ><span>{{devBaseInfo.imsi}}</span></div></div>
                            <div class="row-item"><label class="row-item__label"> 产品PID: </label><div class="row-item__content" ><span>{{devBaseInfo.prodKey}}</span></div></div>
                            <div class="row-item"><label class="row-item__label"> 在线离线: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ offline: devBaseInfo.netStatus!=1 }">{{formatOnline(devBaseInfo.netStatus)}}</span></div></div>
                            <div class="row-item"><label class="row-item__label"> 创建时间: </label><div class="row-item__content" ><span>{{utils.timestampToTime(devBaseInfo.createTime)}}</span></div></div>
                            <div class="row-item"><label class="row-item__label"> 最近上线时间: </label><div class="row-item__content" ><span>{{utils.timestampToTime(devBaseInfo.onlineAt)}}</span></div></div>
                            <div class="row-item"><label class="row-item__label"> 最近下线时间: </label><div class="row-item__content" ><span>{{utils.timestampToTime(devBaseInfo.offlineAt)}}</span></div></div>
                            <div class="row-item"><label class="row-item__label"> 心跳时间间隔: </label><div class="row-item__content" ><span>{{devBaseInfo.heartTime}}分钟</span><el-button style="margin-left: 15px;" type="primary" @click="openHeartTime">修改</el-button></div></div>
                            <div class="row-item"><label class="row-item__label"> 所属第三方平台: </label><div class="row-item__content" ><span v-if="devBaseInfo.platform==='aep'">电信AEP平台</span><span v-if="devBaseInfo.platform==='onenet'">移动OneNet平台</span><span v-if="devBaseInfo.platform==='master'">私有云平台</span></div></div>
                            <div class="row-item" v-if="devDetailInfo.heartbeat!=null"><label class="row-item__label"> 心跳包成功率: </label><div class="row-item__content" ><span>{{devDetailInfo.heartbeat.value}}%</span></div></div>
                            <div class="row-item" v-if="devDetailInfo.logininfo!=null"><label class="row-item__label"> 模组硬件版本号: </label><div class="row-item__content" ><span>{{devDetailInfo.logininfo.md_HwVersion}}</span></div></div>
                            <div class="row-item" v-if="devDetailInfo.logininfo!=null"><label class="row-item__label"> 模组软件版本号: </label><div class="row-item__content" ><span>{{devDetailInfo.logininfo.md_FwVersion}}</span></div></div>
                            <div class="row-item" v-if="devDetailInfo.logininfo!=null"><label class="row-item__label"> 底板硬件版本号: </label><div class="row-item__content" ><span>{{devDetailInfo.logininfo.sd_HwVersion}}</span></div></div>
                            <div class="row-item" v-if="devDetailInfo.logininfo!=null"><label class="row-item__label"> 底板软件版本号: </label><div class="row-item__content" ><span>{{devDetailInfo.logininfo.sd_SwVersion}}</span></div></div>
                            <div class="row-item" v-if="devDetailInfo.info!=null"><label class="row-item__label"> 协议号: </label><div class="row-item__content" ><span>{{devDetailInfo.info.protocol_Number}}</span></div></div>
                        </div>
                    </div>
              </div>
              <div class="info-card">
                    <h3 class="info-card-title">详细信息 &nbsp;&nbsp;&nbsp;&nbsp;<span v-if="devDetailInfo.info!=null">上报时间:{{utils.timestampToTime(devDetailInfo.info.timestamp)}}</span></h3>
                    <div class="info-body">
                        <div class="color-container">
                          <div class="dev-status" v-if="devDetailInfo.info!=null&&devDetailInfo.info.updateBean1!=null&&devDetailInfo.info.protocol_Number==1">
                           <div class="row-item"><label class="row-item__label"> 电池电量: </label><div class="row-item__content" ><span>{{devDetailInfo.info.updateBean1.battery_Level}}%</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 温度: </label><div class="row-item__content" ><span>{{devDetailInfo.info.updateBean1.temperature}}℃</span></div></div>
                           <div class="row-item"><label class="row-item__label"> IR浓度: </label><div class="row-item__content" ><span>{{devDetailInfo.info.updateBean1.ir_concentration}}%</span></div></div>
                           <div class="row-item"><label class="row-item__label"> R浓度: </label><div class="row-item__content" ><span>{{devDetailInfo.info.updateBean1.r_concentration}}%</span></div></div>
                            <div class="clear"></div>
                            <div class="dev-pub-status" style="margin-bottom:10px">
                              <h3 style="margin-bottom:10px">公共状态</h3>
                           <div class="row-item"><label class="row-item__label"> 防拆触发警告: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean1.dismantle }">{{formatDeviceSign(devDetailInfo.info.updateBean1.dismantle)}}</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 寿命终止: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean1.lifeStop }">{{formatDeviceSign(devDetailInfo.info.updateBean1.lifeStop)}}</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 低压警告: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean1.lowBattery }">{{formatDeviceSign(devDetailInfo.info.updateBean1.lowBattery)}}</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 低压警告免打扰: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean1.lowBNoDisturb }">{{formatDeviceSign(devDetailInfo.info.updateBean1.lowBNoDisturb)}}</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 底板通讯异常: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean1.sdcomAbnormal }">{{formatDeviceSign(devDetailInfo.info.updateBean1.sdcomAbnormal)}}</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 本地测试报警: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean1.localTestAlarm }">{{formatDeviceSign(devDetailInfo.info.updateBean1.localTestAlarm)}}</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 是否是心跳包: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean1.heartBeat }">{{formatDeviceSign(devDetailInfo.info.updateBean1.heartBeat)}}</span></div></div>
                             <div class="clear"></div>
                            </div>
                            <div class="clear"></div>
                             <div class="dev-smoke-status">
                               <h3 style="margin-bottom:10px">烟感状态</h3>
                           <div class="row-item"><label class="row-item__label"> 烟雾报警: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean1.smokeAlarm }">{{formatDeviceSign(devDetailInfo.info.updateBean1.smokeAlarm)}}</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 烟雾报警静音: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean1.smokeSilence }">{{formatDeviceSign(devDetailInfo.info.updateBean1.smokeSilence)}}</span></div></div> 
                           <div class="row-item"><label class="row-item__label"> 烟雾传感器故障: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean1.sensorFault }">{{formatDeviceSign(devDetailInfo.info.updateBean1.sensorFault)}}</span></div></div> 
                           <div class="row-item"><label class="row-item__label"> 烟雾传感器故障免打扰: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean1.sensorFaultNoDisturb }">{{formatDeviceSign(devDetailInfo.info.updateBean1.sensorFaultNoDisturb)}}</span></div></div>
                            <div class="clear"></div>
                             </div>
                          </div>
                          <div class="dev-status" v-if="devDetailInfo.info!=null&&devDetailInfo.info.updateBean2!=null&&devDetailInfo.info.protocol_Number==2">
                              <div class="row-item"><label class="row-item__label"> GAS浓度: </label><div class="row-item__content" ><span>{{devDetailInfo.info.updateBean2.gasLevel}}%LEL</span></div></div>
                               <div class="row-item"><label class="row-item__label"> CO浓度: </label><div class="row-item__content" ><span>{{devDetailInfo.info.updateBean2.coLevel}}ppm</span></div></div>
                               <div class="row-item"><label class="row-item__label"> 温度: </label><div class="row-item__content" ><span>{{devDetailInfo.info.updateBean2.temperature}}℃</span></div></div>
                                <div class="clear"></div>
                              <div class="dev-pub-status" style="margin-bottom:10px">
                                <h3 style="margin-bottom:10px">公共状态</h3>
                                <div class="row-item"><label class="row-item__label"> 是否是心跳包: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean2.heartBeat }">{{formatDeviceSign(devDetailInfo.info.updateBean2.heartBeat)}}</span></div></div>
                                <div class="row-item"><label class="row-item__label"> 本地测试报警: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean2.localTestAlarm }">{{formatDeviceSign(devDetailInfo.info.updateBean2.localTestAlarm)}}</span></div></div>
                                <div class="row-item"><label class="row-item__label"> 远程测试报警: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean2.remoteTestAlarm }">{{formatDeviceSign(devDetailInfo.info.updateBean2.remoteTestAlarm)}}</span></div></div>
                                <div class="row-item"><label class="row-item__label"> 低压警告免打扰: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean2.lowBNoDisturb }">{{formatDeviceSign(devDetailInfo.info.updateBean2.lowBNoDisturb)}}</span></div></div>
                                <div class="row-item"><label class="row-item__label"> 低压警告: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean2.lowBattery }">{{formatDeviceSign(devDetailInfo.info.updateBean2.lowBattery)}}</span></div></div>  
                                <div class="row-item"><label class="row-item__label"> 寿命终止: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean2.lifeStop }">{{formatDeviceSign(devDetailInfo.info.updateBean2.lifeStop)}}</span></div></div>  
                                <div class="row-item"><label class="row-item__label"> 是否是DC设备: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean2.dc }">{{formatDeviceSign(devDetailInfo.info.updateBean2.dc)}}</span></div></div>
                                <div class="row-item"><label class="row-item__label"> 通讯板与底板通讯异常: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean2.sdcomAbnormal }">{{formatDeviceSign(devDetailInfo.info.updateBean2.sdcomAbnormal)}}</span></div></div>
                                <div class="clear"></div>
                              </div>
                              <div class="dev-gas-status" style="margin-bottom:10px">
                                <h3 style="margin-bottom:10px">GAS状态</h3>
                                <div class="row-item"><label class="row-item__label"> GAS传感器故障免打扰: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean2.gasSensorFaultNoDisturb }">{{formatDeviceSign(devDetailInfo.info.updateBean2.gasSensorFaultNoDisturb)}}</span></div></div>          
                                <div class="row-item"><label class="row-item__label"> GAS传感器故障: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean2.gasSensorFault }">{{formatDeviceSign(devDetailInfo.info.updateBean2.gasSensorFault)}}</span></div></div>   
                                <div class="row-item"><label class="row-item__label"> GAS报警静音: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean2.gasSilence }">{{formatDeviceSign(devDetailInfo.info.updateBean2.gasSilence)}}</span></div></div>
                                <div class="row-item"><label class="row-item__label"> GAS报警: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean2.gasAlarm }">{{formatDeviceSign(devDetailInfo.info.updateBean2.gasAlarm)}}</span></div></div>
                              <div class="clear"></div>
                              </div>
                              <div class="dev-co-status" style="margin-bottom:10px">
                                <h3 style="margin-bottom:10px">GAS状态</h3>
                                <div class="row-item"><label class="row-item__label"> CO传感器故障免打扰: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean2.coSensorFaultNoDisturb }">{{formatDeviceSign(devDetailInfo.info.updateBean2.coSensorFaultNoDisturb)}}</span></div></div>          
                                <div class="row-item"><label class="row-item__label"> CO传感器故障: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean2.coSensorFault }">{{formatDeviceSign(devDetailInfo.info.updateBean2.coSensorFault)}}</span></div></div>   
                                <div class="row-item"><label class="row-item__label"> CO报警静音: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean2.coSilence }">{{formatDeviceSign(devDetailInfo.info.updateBean2.coSilence)}}</span></div></div>
                                <div class="row-item"><label class="row-item__label"> CO报警: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean2.coAlarm }">{{formatDeviceSign(devDetailInfo.info.updateBean2.coAlarm)}}</span></div></div>
                              <div class="clear"></div>
                              </div>
                          </div>
                           <div class="dev-status" v-if="devDetailInfo.info!=null&&devDetailInfo.info.updateBean3!=null&&devDetailInfo.info.protocol_Number==3">
                           <div class="row-item"><label class="row-item__label"> 设备状态: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: devDetailInfo.info.updateBean3.device_status!=7 }">{{formatDeviceStatus(devDetailInfo.info.updateBean3.device_status)}}</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 电池电量: </label><div class="row-item__content" ><span>{{devDetailInfo.info.updateBean3.battery_level}}%</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 温度: </label><div class="row-item__content" ><span>{{devDetailInfo.info.updateBean3.temperature}}℃</span></div></div>
                           <div class="row-item"><label class="row-item__label"> GAS浓度: </label><div class="row-item__content" ><span>{{devDetailInfo.info.updateBean3.gasLevel}}%LEL</span></div></div>
                           <div class="row-item"><label class="row-item__label"> CO浓度: </label><div class="row-item__content" ><span>{{devDetailInfo.info.updateBean3.coLevel}}ppm</span></div></div>
                           </div>
                          <div class="clear"></div>
                        </div>
                    </div>
              </div>
          </el-card>
          <el-card shadow="always" style="margin-top: 15px;">
                    <div class="info-card" style="width: 100%;">
                    <h3 class="info-card-title">近30天设备报警记录</h3>
                    <div class="info-body">
                       <div class="color-container">
                                 <!--表格-->
                                <el-table
                                  :data="tableAlarms.slice((currentPage - 1) * 10, currentPage * 10)"
                                  border
                                  style="width: 100%">
                                  <el-table-column
                                    prop="deviceId"
                                    label="设备ID"
                                    width="180">
                                  </el-table-column>
                                  <el-table-column label="告警">
                                    <template scope="scope">
                                      <span class="cicle-pointer alarm">{{scope.row.alarmContent}}</span>
                                    </template>
                                  </el-table-column>
                                  <el-table-column
                                    prop="timestamp"
                                    label="上报时间"
                                    width="180" :formatter="formatTimestamp">
                                  </el-table-column>
                                  <el-table-column label="">
                                    <template scope="scope">
                                      <el-button type="primary" size="small" @click="handleDetail(scope.row)">查看详情</el-button>
                                    </template>
                                  </el-table-column>
                                </el-table>
                                <div class="block">
                                  <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-size="10"
                                    layout="prev, pager, next, jumper"
                                    :total="tableAlarms.length">
                                  </el-pagination>
                                </div>
                       </div>
                    </div>
                    </div>
          </el-card>
                    <el-card shadow="always" style="margin-top: 15px;">
                    <div class="info-card" style="width: 100%;">
                    <h3 class="info-card-title">近30天主要数据趋势图</h3>
                    <div class="info-body">
                       <div class="color-container">
                        <div class="item-chart" id="container-battery-value-month"></div>
                        <div class="item-chart" id="container-temp-month"></div>
                        <div class="item-chart" id="container-ir-month"></div>
                        <div class="item-chart" id="container-r-month"></div>
                        <div class="item-chart" id="container-gas-level-month"></div>
                        <div class="item-chart" id="container-co-level-month"></div>
                        <div class="clear"></div>
                       </div>
                    </div>
                    </div>
          </el-card>
      <el-dialog title="告警详情"
        :visible.sync="dialogVisibleAlarmDetail"
        width="50%" :close-on-click-modal="false">
              <div class="info-card" style="width:100%">
                    <h3 class="info-card-title">上报时间</h3>
                    <div class="info-body">
                        <div class="color-container" v-if="alarmDetail!=null">
                          {{utils.timestampToTime(alarmDetail.timestamp)}}
                        </div>
                    </div>
                    <div class="clear"></div>   
                    <h3 class="info-card-title">详细信息</h3>
                    <div class="info-body">
                        <div class="color-container">
                          <div class="dev-status" v-if="alarmDetail!=null&&alarmDetail.updateBean1!=null&&alarmDetail.protocol_Number==1">
                           <div class="row-item"><label class="row-item__label"> 电池电量: </label><div class="row-item__content" ><span>{{alarmDetail.updateBean1.battery_Level}}%</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 温度: </label><div class="row-item__content" ><span>{{alarmDetail.updateBean1.temperature}}℃</span></div></div>
                           <div class="row-item"><label class="row-item__label"> IR浓度: </label><div class="row-item__content" ><span>{{alarmDetail.updateBean1.ir_concentration}}%</span></div></div>
                           <div class="row-item"><label class="row-item__label"> R浓度: </label><div class="row-item__content" ><span>{{alarmDetail.updateBean1.r_concentration}}%</span></div></div>
                           <div class="clear"></div>
                              <div class="dev-pub-status" style="margin-bottom:10px">
                              <h3 style="margin-bottom:10px">公共状态</h3>
                           <div class="row-item"><label class="row-item__label"> 防拆触发警告: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean1.dismantle }">{{formatDeviceSign(alarmDetail.updateBean1.dismantle)}}</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 寿命终止: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean1.lifeStop }">{{formatDeviceSign(alarmDetail.updateBean1.lifeStop)}}</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 低压警告: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean1.lowBattery }">{{formatDeviceSign(alarmDetail.updateBean1.lowBattery)}}</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 低压警告免打扰: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean1.lowBNoDisturb }">{{formatDeviceSign(alarmDetail.updateBean1.lowBNoDisturb)}}</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 底板通讯异常: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean1.sdcomAbnormal }">{{formatDeviceSign(alarmDetail.updateBean1.sdcomAbnormal)}}</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 本地测试报警: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean1.localTestAlarm }">{{formatDeviceSign(alarmDetail.updateBean1.localTestAlarm)}}</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 是否是心跳包: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean1.heartBeat }">{{formatDeviceSign(alarmDetail.updateBean1.heartBeat)}}</span></div></div>
                              <div class="clear"></div>
                              </div>
                           <div class="dev-smoke-status" style="margin-bottom:10px">
                              <h3 style="margin-bottom:10px">公共状态</h3>
                           <div class="row-item"><label class="row-item__label"> 烟雾报警: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean1.smokeAlarm }">{{formatDeviceSign(alarmDetail.updateBean1.smokeAlarm)}}</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 烟雾报警静音: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean1.smokeSilence }">{{formatDeviceSign(alarmDetail.updateBean1.smokeSilence)}}</span></div></div> 
                           <div class="row-item"><label class="row-item__label"> 烟雾传感器故障: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean1.sensorFault }">{{formatDeviceSign(alarmDetail.updateBean1.sensorFault)}}</span></div></div> 
                           <div class="row-item"><label class="row-item__label"> 烟雾传感器故障免打扰: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean1.sensorFaultNoDisturb }">{{formatDeviceSign(alarmDetail.updateBean1.sensorFaultNoDisturb)}}</span></div></div>
                              <div class="clear"></div>
                           </div>  
                          </div>
                          <div class="dev-status" v-if="alarmDetail!=null&&alarmDetail.updateBean2!=null&&alarmDetail.protocol_Number==2">
                           <div class="row-item"><label class="row-item__label"> GAS浓度: </label><div class="row-item__content" ><span>{{alarmDetail.updateBean2.gasLevel}}%LEL</span></div></div>
                           <div class="row-item"><label class="row-item__label"> CO浓度: </label><div class="row-item__content" ><span>{{alarmDetail.updateBean2.coLevel}}ppm</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 温度: </label><div class="row-item__content" ><span>{{alarmDetail.updateBean2.temperature}}℃</span></div></div>
                           <div class="clear"></div>
                              <div class="dev-pub-status" style="margin-bottom:10px">
                                <h3 style="margin-bottom:10px">公共状态</h3>
                                  <div class="row-item"><label class="row-item__label"> 是否是心跳包: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean2.heartBeat }">{{formatDeviceSign(alarmDetail.updateBean2.heartBeat)}}</span></div></div>
                                    <div class="row-item"><label class="row-item__label"> 本地测试报警: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean2.localTestAlarm }">{{formatDeviceSign(alarmDetail.updateBean2.localTestAlarm)}}</span></div></div>
                                    <div class="row-item"><label class="row-item__label"> 远程测试报警: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean2.remoteTestAlarm }">{{formatDeviceSign(alarmDetail.updateBean2.remoteTestAlarm)}}</span></div></div>
                                    <div class="row-item"><label class="row-item__label"> 低压警告免打扰: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean2.lowBNoDisturb }">{{formatDeviceSign(alarmDetail.updateBean2.lowBNoDisturb)}}</span></div></div>
                                    <div class="row-item"><label class="row-item__label"> 低压警告: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean2.lowBattery }">{{formatDeviceSign(alarmDetail.updateBean2.lowBattery)}}</span></div></div>  
                                    <div class="row-item"><label class="row-item__label"> 寿命终止: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean2.lifeStop }">{{formatDeviceSign(alarmDetail.updateBean2.lifeStop)}}</span></div></div>  
                                    <div class="row-item"><label class="row-item__label"> 是否是DC设备: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean2.dc }">{{formatDeviceSign(alarmDetail.updateBean2.isDC)}}</span></div></div>
                                    <div class="row-item"><label class="row-item__label"> 通讯板与底板通讯异常: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean2.sdcomAbnormal }">{{formatDeviceSign(alarmDetail.updateBean2.sdcomAbnormal)}}</span></div></div>
                                  <div class="clear"></div>
                              </div>
                              <div class="dev-gas-status" style="margin-bottom:10px">
                                <h3 style="margin-bottom:10px">GAS状态</h3>
                                <div class="row-item"><label class="row-item__label"> GAS传感器故障免打扰: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean2.gasSensorFaultNoDisturb }">{{formatDeviceSign(alarmDetail.updateBean2.gasSensorFaultNoDisturb)}}</span></div></div>          
                                <div class="row-item"><label class="row-item__label"> GAS传感器故障: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean2.gasSensorFault }">{{formatDeviceSign(alarmDetail.updateBean2.gasSensorFault)}}</span></div></div>   
                                <div class="row-item"><label class="row-item__label"> GAS报警静音: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean2.gasSilence }">{{formatDeviceSign(alarmDetail.updateBean2.gasilence)}}</span></div></div>
                                <div class="row-item"><label class="row-item__label"> GAS报警: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean2.gasAlarm }">{{formatDeviceSign(alarmDetail.updateBean2.gasAlarm)}}</span></div></div>
                                <div class="clear"></div>
                              </div>
                              <div class="dev-co-status" style="margin-bottom:10px">
                                <h3 style="margin-bottom:10px">CO状态</h3>
                                 <div class="row-item"><label class="row-item__label"> CO传感器故障免打扰: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean2.coSensorFaultNoDisturb }">{{formatDeviceSign(alarmDetail.updateBean2.coSensorFaultNoDisturb)}}</span></div></div>          
                                 <div class="row-item"><label class="row-item__label"> CO传感器故障: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean2.coSensorFault }">{{formatDeviceSign(alarmDetail.updateBean2.coSensorFault)}}</span></div></div>   
                                 <div class="row-item"><label class="row-item__label"> CO报警静音: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean2.coSilence }">{{formatDeviceSign(alarmDetail.updateBean2.coSilence)}}</span></div></div>
                                 <div class="row-item"><label class="row-item__label"> CO报警: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean2.coAlarm }">{{formatDeviceSign(alarmDetail.updateBean2.coAlarm)}}</span></div></div>
                                <div class="clear"></div>
                              </div>
                          </div>
                           <div class="dev-status" v-if="alarmDetail!=null&&alarmDetail.updateBean3!=null&&alarmDetail.protocol_Number==3">
                           <div class="row-item"><label class="row-item__label"> 设备状态: </label><div class="row-item__content" ><span class="cicle-pointer" v-bind:class="{ alarm: alarmDetail.updateBean3.device_status!=7 }">{{formatDeviceStatus(alarmDetail.updateBean3.device_status)}}</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 电池电量: </label><div class="row-item__content" ><span>{{alarmDetail.updateBean3.battery_level}}%</span></div></div>
                           <div class="row-item"><label class="row-item__label"> 温度: </label><div class="row-item__content" ><span>{{alarmDetail.updateBean3.temperature}}℃</span></div></div>
                           <div class="row-item"><label class="row-item__label"> GAS浓度: </label><div class="row-item__content" ><span>{{alarmDetail.updateBean3.gasLevel}}%LEL</span></div></div>
                           <div class="row-item"><label class="row-item__label"> CO浓度: </label><div class="row-item__content" ><span>{{alarmDetail.updateBean3.coLevel}}ppm</span></div></div>
                           </div>
                        </div>
                    </div>
                    <div class="clear"></div>
              </div>
            <div class="clear"></div>        
      </el-dialog>
      <el-dialog :title="devBaseInfo.deviceName"
        :visible.sync="dialogVisible"
        width="50%" :close-on-click-modal="false">
        <div id="container_login" style="height:400px"></div>
        <span slot="footer" class="dialog-footer">
          <el-popconfirm
            title="确定已处理该设备异常,并且设备已经上线了吗？" @confirm="dultWithAccess"
          >
            <el-button slot="reference" v-show="isSeeMuliLoginBtn">标记为已处理</el-button>
          </el-popconfirm>
        </span>
      </el-dialog>
          <el-dialog 
        :visible.sync="dialogVisibleAnylysis"
        width="85%"
        :before-close="handleClose" :close-on-click-modal="false">
        <el-steps :active="step" finish-status="success">
          <el-step title="请勾选查看项"></el-step>
          <el-step title="请选择起止时间"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
        <div style="padding:20px" v-show="step==0">
          <el-checkbox class="step1-item" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedProperties" @change="handleCheckedPropertiesChange">
            <el-checkbox class="step1-item" v-for="property in properties" :label="property" :key="property">{{property}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div style="padding:20px" v-show="step==1">
            <div class="block">
            <span class="demonstration">请选择起止时间</span>
            <el-date-picker
              v-model="value1"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </div>
        <div id="step3" v-show="step>1" style="height:400px;overflow:scroll;padding:20px;" v-loading="deepLoading" element-loading-text="拼命加载中">
              <div class="item-chart" v-show="checkedProperties.indexOf('设备状态')!=-1" id="container-status-value"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('电池电量')!=-1" id="container-battery-value"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('IR浓度')!=-1" id="container-ir"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('R浓度')!=-1" id="container-r"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('GAS浓度')!=-1" id="container-gas-level"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('CO浓度')!=-1" id="container-co-level"></div>
               <div class="item-chart" v-show="checkedProperties.indexOf('温度(temp)')!=-1" id="container-temp"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('信噪比(snr)')!=-1" id="container-snr"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('参考信号接收功率(rsrp)')!=-1" id="container-rsrp"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('无线信号覆盖等级(ecl)')!=-1" id="container-ecl"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('CSQ')!=-1" id="container-csq"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('PCI')!=-1" id="container-pci"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('RSRQ')!=-1" id="container-rsrq"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('频点(EARFCN)')!=-1" id="container-earfcn"></div>
              <div class="item-chart" v-show="checkedProperties.indexOf('TAC')!=-1" id="container-tac"></div>
        </div>
        <span slot="footer" class="dialog-footer">
                  <el-button style="margin-top: 12px;" @click="nextAnalysis">{{nextText}}</el-button>
        </span>
      </el-dialog>
      <el-dialog title="设置心跳包间隔时间"
        :visible.sync="dialogVisibleHeartTime"
        width="50%" :close-on-click-modal="false">
          <p class="heart_hint">设置心跳包间隔:(<span style="font-size:23px;">天</span>)</p><el-input-number v-model="heart_time_day_set"    :min="0" :max="1000" label="描述文字"></el-input-number>
          <p class="heart_hint">设置心跳包间隔:(<span style="font-size:23px;">小时</span>)</p><el-input-number v-model="heart_time_hour_set"  :min="0" :max="23" label="描述文字"></el-input-number>
          <p class="heart_hint">设置心跳包间隔:(<span style="font-size:23px;">分钟</span>)</p><el-input-number v-model="heart_time_min_set"  :min="0" :max="59" label="描述文字"></el-input-number>
        <span slot="footer" class="dialog-footer">
                  <el-button style="margin-top: 12px;" type="primary" @click="modifyHeartTime">确定</el-button>
        </span>
      </el-dialog>
    </section>
</template>
<script>
import { profilegcService,deviceService,deviceDetailService } from '@/services';
import utils from '@/utils';
import utilsDev from '@/utils-device';
import echarts from 'echarts';
export default {
    data () {
          var date = new Date();
          var lastDate = new Date(date - 1000 * 60 * 60 * 24 * 30);
        return {
            pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
           value1: [lastDate, date],
           alarmItems: [],
           dialogVisibleAlarmDetail: false,
           dialogVisibleAnylysis: false,
           dialogVisible: false,
           devBaseInfo: {},
           devDetailInfo: {},
           login_error_list: null,
           login_error_marks: [],
           isSeeMuliLoginBtn: false,
            checkAll: false,
            checkedProperties: [],
            properties: ['设备状态' , '电池电量', 'IR浓度','R浓度', 'GAS浓度', 'CO浓度', '信噪比(snr)', '参考信号接收功率(rsrp)', '温度(temp)', 'CSQ','频点(EARFCN)','PCI','RSRQ','TAC','无线信号覆盖等级(ecl)'],
            isIndeterminate: false,
            step: 0,
            nextText: "下一步",
            deepLoading: false,
            deepBatteryValueStatic: null,
            deepSnrStatic: null,
            deepRsrpStatic: null,
            deepEclStatic: null,
            deepTempStatic: null,
            deepCSQStatic: null,
            deepPCIStatic: null,
            deepRSRQStatic: null,
            deepEARFCNStatic: null,
            deepTACStatic: null,
            deepIRStatic: null,
            deepRStatic: null,
            deepgasLevelStatic: null,
            deepcoLevelStatic: null,
            tableAlarms:[],
            currentPage: 1,
            gasmonthList: [],
            comonthList: [],
            batterymonthList: [],
            tempmonthList: [],
            irmonthList: [],
            rmonthList: [],
            alarmDetail: null,
            status_bean: null,
            dialogVisibleHeartTime: false,
            heart_time_day_set: 0,
            heart_time_hour_set: 20,
            heart_time_min_set: 0,
        };
    },
    created () {
        this.getDetail();
        this.getHistory();
    },
    methods: {
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          this.currentPage = val;
          if (process.env.NODE_ENV !== 'production') {
          // eslint-disable-next-line
            console.log(`当前页: ${val}`);
          }
        },
        handleDetail (val) {
           console.log(val);
           this.alarmDetail = Object.assign({},val);
           this.dialogVisibleAlarmDetail = true;
        },
        async getDetail() {
           const { devBaseInfo, devDetailInfo, alarmList } = await profilegcService.queryDeviceDetail(this.$route.query.deviceId);
           this.alarmItems = alarmList;
           this.devBaseInfo = devBaseInfo;
           this.devDetailInfo = devDetailInfo;
        },
        async getHistory() {
           this.currentPage = 1;
           const {alarms,battery,temp,ir_con,r_con,gasLevel,coLevel} = await profilegcService.queryDeviceHistory(this.$route.query.deviceId);
           this.tableAlarms = alarms;
           this.gasmonthList = gasLevel;
           this.comonthList = coLevel;
           this.batterymonthList = battery;
           this.tempmonthList = temp;
           this.irmonthList = ir_con;
           this.rmonthList = r_con;

           this.goSeeAnalysisTempStateMonth();
           this.goSeeAnalysisBatteryValueStateMonth();
           this.goSeeAnalysisIRValueStateMonth();
           this.goSeeAnalysisRValueStateMonth();
           this.goSeeAnalysisGasLevelStateMonth();
           this.goSeeAnalysisCoLevelStateeMonth();
        },
        gotoseedata () {
             this.$router.push({ path: '/deviceDataProfileGC', query: { deviceId: this.$route.query.deviceId } });
        },
        goSeeAnalysis () {
          this.dialogVisibleAnylysis = true;
        },
        gotoSeeLoginLog () {
          this.dialogVisible = true;
          this.isSeeMuliLoginBtn = false;
          this.queryDeviceLoginErrorHistory();
        },
        async queryDeviceLoginErrorHistory () {
          const { error_state } = await profilegcService.queryDeviceLoginErrorHistory(this.$route.query.deviceId);
          this.login_error_list = error_state;
          this.login_error_marks = [];
          this.login_error_list.forEach(element => {
            var a = element[1];
            if (a === 2) {
              var obj = {};
              obj.name = "登录异常";
              obj.value = "已处理";
              obj.xAxis = element[0];
              obj.yAxis = 2;
              this.login_error_marks.push(obj);
            }
          });
          this.getLoginData();
          if(this.login_error_list.length>0){
            if(this.login_error_list[this.login_error_list.length-1][1]===1){
                this.isSeeMuliLoginBtn = true;
            }else {
                this.isSeeMuliLoginBtn = false;
            }
          }
        },
        async dultWithAccess () {
            try {
              await profilegcService.deltWithLoginErr(this.$route.query.deviceId);
              this.$message({
                message: '已处理',
                type: 'success'
              });
              this.dialogVisible = false; 
              this.getDetail();
            } catch (error) {
              console.log(error);
            }
        },
        formatDeviceStatus(row) {
          switch (row) {
            case 1:
              return '报警';
            case 2:
              return '报警静音';
            case 3:
              return '传感器故障';
            case 6:
              return '寿命终止';
            case 7:
              return '正常';
            case 8:
              return '预热';
            case 9:
              return '测试';
            case 10:
              return '通讯故障';
            default:
              return '未知';
          }
      },
      formatOnline(row) {
        switch (row) {
          case 1:
            return '在线';
          default:
            return '离线';
        }
      },
      formatDeviceSign(row) {
        if(row===true)
            return '是';
        else
            return '否';
      },
      getLoginData() {
      var dom = document.getElementById("container_login");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '登录日志'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            var val = params[0].data[1];
            var eve = "";
            if (val === 1) {
              eve = "设备登录";
            } else if (val === 2) {
              eve = "已处理";
            }
            return utils.timestampToTime(params[0].axisValue) + "<br>" + eve;
          },
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
        },
        yAxis: {
          min: 0,
          max: 2,
          minInterval: 1,
          axisLabel: {
            formatter: function(val) {
              if (val === 0) {
                return "";
              } else if (val === 1) {
                return "设备登录";
              } else {
                return "已处理";
              }
            }
          }
        },
        series: [
          {
            name: '设备登录',
            type: 'line',
            axisLabel: {
              formatter: function(val) {
                if (val === 0) {
                  return "";
                } else if (val === 1) {
                  return "设备登录";
                } else {
                  return "已处理";
                }
              }
            },
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
            data: this.login_error_list,
            markPoint: {
              data: this.login_error_marks
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    handleClose () {
      this.deepLoading = false;
      this.step = 0;
      this.nextText = "下一步";
      this.checkAll = false;
      this.checkedProperties = [];
      this.isIndeterminate = false;
      this.dialogVisibleAnylysis = false;
    },
    handleCheckAllChange(val) {
      this.checkedProperties = val ? this.properties : [];
      this.isIndeterminate = false;
    },
    handleCheckedPropertiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.properties.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.properties.length;
    },
    nextAnalysis () {
      if (this.step === 0) {
        if (this.checkedProperties.length === 0) {
          this.$message.error('请勾选至少一项');
          return;
        }
        this.step = 1;
      } else if (this.step === 1) {
        if (this.value1 == null) {
          this.$message.error('请选择起止时间');
          return;
        }
        this.step ++;
        this.nextText = "完成";
        this.deepLoading = true;
        this.queryDeviceAnalysis();
      } else {
        this.deepLoading = false;
        this.handleClose();
      }
    },
      async queryDeviceAnalysis () {
       const { battery,ir_con,r_con,gasLevel,coLevel, snr, rsrp, ecl, temp, csq, pci, rsrq, earfcn, tac ,status } = await profilegcService.queryDeviceDeepHistory(this.$route.query.deviceId, this.value1[0].getTime(), this.value1[1].getTime());
        this.step = 3;
        this.deepLoading = false;

        this.deepBatteryValueStatic = battery;
        this.deepIRStatic = ir_con;
        this.deepRStatic = r_con;
        this.deepgasLevelStatic = gasLevel;
        this.deepcoLevelStatic = coLevel;
        this.deepTempStatic = temp;
        this.deepSnrStatic = snr;
        this.deepRsrpStatic = rsrp;
        this.deepEclStatic = ecl;
        this.deepCSQStatic = csq;
        this.deepPCIStatic = pci;
        this.deepRSRQStatic = rsrq;
        this.deepEARFCNStatic = earfcn;
        this.deepTACStatic = tac;
        this.status_bean = status;

      if (this.checkedProperties.indexOf('设备状态') !== -1) {
        this.goSeeAnalysisDeviceStatus();
      }

      if (this.checkedProperties.indexOf('GAS浓度') !== -1) {
        this.goSeeAnalysisGasLevelState();
      }
      if (this.checkedProperties.indexOf('CO浓度') !== -1) {
        this.goSeeAnalysisCoLevelState();
      }
      if (this.checkedProperties.indexOf('IR浓度') !== -1) {
        this.goSeeAnalysisIRValueState();
      }
      if (this.checkedProperties.indexOf('R浓度') !== -1) {
        this.goSeeAnalysisRValueState();
      }
      if (this.checkedProperties.indexOf('电池电量') !== -1) {
        this.goSeeAnalysisBatteryValueState();
      }
      if (this.checkedProperties.indexOf('信噪比(snr)') !== -1) {
        this.goSeeAnalysisSnrState();
      }
      if (this.checkedProperties.indexOf('参考信号接收功率(rsrp)') !== -1) {
        this.goSeeAnalysisRsrpState();
      }
      if (this.checkedProperties.indexOf('无线信号覆盖等级(ecl)') !== -1) {
        this.goSeeAnalysisEclState();
      }
      if (this.checkedProperties.indexOf('温度(temp)') !== -1) {
        this.goSeeAnalysisTempState();
      }
      if (this.checkedProperties.indexOf('CSQ') !== -1) {
        this.goSeeAnalysisCsqState();
      }
      if (this.checkedProperties.indexOf('PCI') !== -1) {
        this.goSeeAnalysisPciState();
      }
      if (this.checkedProperties.indexOf('RSRQ') !== -1) {
        this.goSeeAnalysisRsrqState();
      }
      if (this.checkedProperties.indexOf('频点(EARFCN)') !== -1) {
        this.goSeeAnalysisEarfcnState();
      }
      if (this.checkedProperties.indexOf('TAC') !== -1) {
        this.goSeeAnalysisTacState();
      }
      },
      goSeeAnalysisSnrState () {
      var dom = document.getElementById("container-snr");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '信噪比(snr)'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>snr:" + params[0].data[1];
          },
        },
        legend: {
          data: ['最小值:'+this.deepSnrStatic.min+' 最大值:'+this.deepSnrStatic.max+' 平均值:'+this.deepSnrStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepSnrStatic.min+' 最大值:'+this.deepSnrStatic.max+' 平均值:'+this.deepSnrStatic.avg,
            type: 'line',
            data: this.deepSnrStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisRsrpState () {
      var dom = document.getElementById("container-rsrp");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '参考信号接收功率(rsrp)'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>rsrp:" + params[0].data[1];
          },
        },
        legend: {
          data: ['最小值:'+this.deepRsrpStatic.min+' 最大值:'+this.deepRsrpStatic.max+' 平均值:'+this.deepRsrpStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepRsrpStatic.min+' 最大值:'+this.deepRsrpStatic.max+' 平均值:'+this.deepRsrpStatic.avg,
            type: 'line',
            data: this.deepRsrpStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisEclState () {
      var dom = document.getElementById("container-ecl");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '无线信号覆盖等级(ecl)'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>ecl:" + params[0].data[1];
          },
        },
        legend: {
          data: ['最小值:'+this.deepEclStatic.min+' 最大值:'+this.deepEclStatic.max+' 平均值:'+this.deepEclStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepEclStatic.min+' 最大值:'+this.deepEclStatic.max+' 平均值:'+this.deepEclStatic.avg,
            type: 'line',
            data: this.deepEclStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
     goSeeAnalysisTempState () {
      var dom = document.getElementById("container-temp");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '温度(°c)'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>温度:" + params[0].data[1] + "°c";
          },
        },
        legend: {
          data: ['最小值:'+this.deepTempStatic.min+' 最大值:'+this.deepTempStatic.max+' 平均值:'+this.deepTempStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepTempStatic.min+' 最大值:'+this.deepTempStatic.max+' 平均值:'+this.deepTempStatic.avg,
            type: 'line',
            data: this.deepTempStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisTempStateMonth () {
      var dom = document.getElementById("container-temp-month");
      var myChart = echarts.init(dom);
      var option;

      option = {
        title: {
          text: '温度'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>温度:" + params[0].data[1] + "°c";
          },
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          min: 0,
          max: 100,
          minInterval: 1,
          axisLabel: {
            formatter: function(val) {
              return val + "°c";
            }
          }
        },
        series: [
          {
            name: '温度',
            type: 'line',
            stack: '总量',
            axisLabel: {
              formatter: function(val) {
                return val + "°c";
              }
            },
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
            data: this.tempmonthList
          },
        ]
      };
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    },
    goSeeAnalysisCsqState () {
      var dom = document.getElementById("container-csq");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: 'CSQ'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>CSQ:" + params[0].data[1];
          },
        },
        legend: {
          data: ['最小值:'+this.deepCSQStatic.min+' 最大值:'+this.deepCSQStatic.max+' 平均值:'+this.deepCSQStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepCSQStatic.min+' 最大值:'+this.deepCSQStatic.max+' 平均值:'+this.deepCSQStatic.avg,
            type: 'line',
            data: this.deepCSQStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisPciState () {
      var dom = document.getElementById("container-pci");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: 'PCI'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>PCI:" + params[0].data[1];
          },
        },
        legend: {
          data: ['最小值:'+this.deepPCIStatic.min+' 最大值:'+this.deepPCIStatic.max+' 平均值:'+this.deepPCIStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepPCIStatic.min+' 最大值:'+this.deepPCIStatic.max+' 平均值:'+this.deepPCIStatic.avg,
            type: 'line',
            data: this.deepPCIStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisRsrqState () {
      var dom = document.getElementById("container-rsrq");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: 'RSRQ'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>RSRQ:" + params[0].data[1];
          },
        },
        legend: {
          data: ['最小值:'+this.deepRSRQStatic.min+' 最大值:'+this.deepRSRQStatic.max+' 平均值:'+this.deepRSRQStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepRSRQStatic.min+' 最大值:'+this.deepRSRQStatic.max+' 平均值:'+this.deepRSRQStatic.avg,
            type: 'line',
            data: this.deepRSRQStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisEarfcnState () {
      var dom = document.getElementById("container-earfcn");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '频点(EARFCN)'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>频点(EARFCN):" + params[0].data[1];
          },
        },
        legend: {
          data: ['最小值:'+this.deepEARFCNStatic.min+' 最大值:'+this.deepEARFCNStatic.max+' 平均值:'+this.deepEARFCNStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepEARFCNStatic.min+' 最大值:'+this.deepEARFCNStatic.max+' 平均值:'+this.deepEARFCNStatic.avg,
            type: 'line',
            data: this.deepEARFCNStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisTacState () {
      var dom = document.getElementById("container-tac");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: 'TAC'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>TAC:" + params[0].data[1];
          },
        },
        legend: {
          data: ['最小值:'+this.deepTACStatic.min+' 最大值:'+this.deepTACStatic.max+' 平均值:'+this.deepTACStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '最小值:'+this.deepTACStatic.min+' 最大值:'+this.deepTACStatic.max+' 平均值:'+this.deepTACStatic.avg,
            type: 'line',
            data: this.deepTACStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisIRValueState () {
      var dom = document.getElementById("container-ir");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: 'IR浓度'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>IR浓度:" + params[0].data[1] + "%";
          },
        },
        legend: {
          data: ['最小值:'+this.deepIRStatic.min+' 最大值:'+this.deepIRStatic.max+' 平均值:'+this.deepIRStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          min: 0,
          max: 100,
          minInterval: 1,
          type: 'value',
          axisLabel: {
            formatter: function(val) {
              return val + "%";
            }
          }
        },
        series: [
          {
            name: '最小值:'+this.deepIRStatic.min+' 最大值:'+this.deepIRStatic.max+' 平均值:'+this.deepIRStatic.avg,
            type: 'line',
            data: this.deepIRStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisIRValueStateMonth () {
      var dom = document.getElementById("container-ir-month");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: 'IR浓度'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>IR浓度:" + params[0].data[1] + "%";
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          min: 0,
          max: 100,
          minInterval: 1,
          type: 'value',
          axisLabel: {
            formatter: function(val) {
              return val + "%";
            }
          }
        },
        series: [
          {
            name: 'IR浓度',
            type: 'line',
            data: this.irmonthList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisRValueState () {
      var dom = document.getElementById("container-r");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: 'R浓度'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>R浓度:" + params[0].data[1] + "%";
          },
        },
        legend: {
          data: ['最小值:'+this.deepRStatic.min+' 最大值:'+this.deepRStatic.max+' 平均值:'+this.deepRStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          min: 0,
          max: 100,
          minInterval: 1,
          type: 'value',
          axisLabel: {
            formatter: function(val) {
              return val + "%";
            }
          }
        },
        series: [
          {
            name: '最小值:'+this.deepRStatic.min+' 最大值:'+this.deepRStatic.max+' 平均值:'+this.deepRStatic.avg,
            type: 'line',
            data: this.deepRStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisRValueStateMonth () {
      var dom = document.getElementById("container-r-month");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: 'R浓度'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>R浓度:" + params[0].data[1] + "%";
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          min: 0,
          max: 100,
          minInterval: 1,
          type: 'value',
          axisLabel: {
            formatter: function(val) {
              return val + "%";
            }
          }
        },
        series: [
          {
            name: 'R浓度',
            type: 'line',
            data: this.rmonthList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisGasLevelState () {
      var dom = document.getElementById("container-gas-level");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: 'GAS浓度'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>GAS浓度:" + params[0].data[1] + "%LEL";
          },
        },
        legend: {
          data: ['最小值:'+this.deepgasLevelStatic.min+' 最大值:'+this.deepgasLevelStatic.max+' 平均值:'+this.deepgasLevelStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          min: 0,
          max: 100,
          minInterval: 1,
          type: 'value',
          axisLabel: {
            formatter: function(val) {
              return val + "%";
            }
          }
        },
        series: [
          {
            name: '最小值:'+this.deepgasLevelStatic.min+' 最大值:'+this.deepgasLevelStatic.max+' 平均值:'+this.deepgasLevelStatic.avg,
            type: 'line',
            data: this.deepgasLevelStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisGasLevelStateMonth() {
      var dom = document.getElementById("container-gas-level-month");
      var myChart = echarts.init(dom);
      var option;

      option = {
        title: {
          text: 'GAS浓度'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>GAS浓度:" + params[0].data[1] + "%LEL";
          },
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          min: 0,
          max: 100,
          minInterval: 1,
          axisLabel: {
            formatter: function(val) {
              return val + "%LEL";
            }
          }
        },
        series: [
          {
            name: 'GAS浓度',
            type: 'line',
            stack: '总量',
            axisLabel: {
              formatter: function(val) {
                return val + "%LEL";
              }
            },
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
            data: this.gasmonthList
          },
        ]
      };
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    },
    goSeeAnalysisCoLevelState () {
      var dom = document.getElementById("container-co-level");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: 'CO浓度'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>CO浓度:" + params[0].data[1] + "ppm";
          },
        },
        legend: {
          data: ['最小值:'+this.deepcoLevelStatic.min+' 最大值:'+this.deepcoLevelStatic.max+' 平均值:'+this.deepcoLevelStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          minInterval: 1,
          type: 'value',
          axisLabel: {
            formatter: function(val) {
              return val + "%";
            }
          }
        },
        series: [
          {
            name: '最小值:'+this.deepcoLevelStatic.min+' 最大值:'+this.deepcoLevelStatic.max+' 平均值:'+this.deepcoLevelStatic.avg,
            type: 'line',
            data: this.deepcoLevelStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisCoLevelStateeMonth() {
      var dom = document.getElementById("container-co-level-month");
      var myChart = echarts.init(dom);
      var option;

      option = {
        title: {
          text: 'CO浓度'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>CO浓度:" + params[0].data[1] + "ppm";
          },
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          minInterval: 1,
          axisLabel: {
            formatter: function(val) {
              return val + "ppm";
            }
          }
        },
        series: [
          {
            name: 'CO浓度',
            type: 'line',
            stack: '总量',
            axisLabel: {
              formatter: function(val) {
                return val + "ppm";
              }
            },
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
            data: this.comonthList
          },
        ]
      };
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    },
    goSeeAnalysisBatteryValueState () {
      var dom = document.getElementById("container-battery-value");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '电池电量'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>电池电量:" + params[0].data[1] + "%";
          },
        },
        legend: {
          data: ['最小值:'+this.deepBatteryValueStatic.min+' 最大值:'+this.deepBatteryValueStatic.max+' 平均值:'+this.deepBatteryValueStatic.avg]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          min: 0,
          max: 100,
          minInterval: 1,
          type: 'value',
          axisLabel: {
            formatter: function(val) {
              return val + "%";
            }
          }
        },
        series: [
          {
            name: '最小值:'+this.deepBatteryValueStatic.min+' 最大值:'+this.deepBatteryValueStatic.max+' 平均值:'+this.deepBatteryValueStatic.avg,
            type: 'line',
            data: this.deepBatteryValueStatic.historyList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisBatteryValueStateMonth () {
      var dom = document.getElementById("container-battery-value-month");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '电池电量'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToTime(params[0].axisValue) + "<br>电池电量:" + params[0].data[1] + "%";
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          min: 0,
          max: 100,
          minInterval: 1,
          type: 'value',
          axisLabel: {
            formatter: function(val) {
              return val + "%";
            }
          }
        },
        series: [
          {
            name: '电池电量',
            type: 'line',
            data: this.batterymonthList,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    goSeeAnalysisDeviceStatus () {
      var dom = document.getElementById("container-status-value");
      var myChart = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '设备状态'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
              var str = '';
              if(params[0].data[2].protocol_Number===1){
                                  str+= '<h3>上报时间:'+utils.timestampToTime(params[0].axisValue)+'</h3>'
                                  str+= '<h3 class="chart-title">公共状态</h3>'
                                  str+= '<div class="row-item-t"><div class="row-item-2"><label class="row-item__label"> 防拆触发警告: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean1.dismantle?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean1.dismantle)+'</span></div></div>'
                                  str+= '<div class="row-item-2"><label class="row-item__label"> 寿命终止: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean1.lifeStop?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean1.lifeStop)+'</span></div></div></div>'
                                  str+= '<div class="row-item-t"><div class="row-item-2"><label class="row-item__label"> 低压警告: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean1.lowBattery?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean1.lowBattery)+'</span></div></div>'
                                  str+= '<div class="row-item-2"><label class="row-item__label"> 低压警告免打扰: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean1.lowBNoDisturb?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean1.lowBNoDisturb)+'</span></div></div></div>'
                                  str+= '<div class="row-item-t"><div class="row-item-2"><label class="row-item__label"> 底板通讯异常: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean1.sdcomAbnormal?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean1.sdcomAbnormal)+'</span></div></div>'
                                  str+= '<div class="row-item-2"><label class="row-item__label"> 寿命终止: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean1.localTestAlarm?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean1.localTestAlarm)+'</span></div></div></div>'
                                  str+= '<div class="row-item-t"><div class="row-item-2"><label class="row-item__label"> 是否是心跳包: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean1.heartBeat?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean1.heartBeat)+'</span></div></div></div>'
                                  str+= '<div class="clear"></div>'
                                  str+= '<h3 class="chart-title">烟雾状态</h3>'
                                  str+= '<div class="row-item-t"><div class="row-item-2"><label class="row-item__label"> 烟雾报警: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean1.smokeAlarm?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean1.smokeAlarm)+'</span></div></div>'
                                  str+= '<div class="row-item-2"><label class="row-item__label"> 烟雾报警静音: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean1.smokeSilence?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean1.smokeSilence)+'</span></div></div></div>'
                                  str+= '<div class="row-item-t"><div class="row-item-2"><label class="row-item__label"> 烟雾传感器故障: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean1.sensorFault?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean1.sensorFault)+'</span></div></div>'
                                  str+= '<div class="row-item-2"><label class="row-item__label"> 烟雾传感器故障免打扰: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean1.sensorFaultNoDisturb?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean1.sensorFaultNoDisturb)+'</span></div></div></div>'
              }else if(params[0].data[2].protocol_Number===2){
                                  str+= '<h3>上报时间:'+utils.timestampToTime(params[0].axisValue)+'</h3>'
                                  str+= '<h3 class="chart-title">公共状态</h3>'
                                  str+= '<div class="row-item-t"><div class="row-item-2"><label class="row-item__label"> 是否是心跳包: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean2.heartBeat?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean2.heartBeat)+'</span></div></div>'
                                  str+= '<div class="row-item-2"><label class="row-item__label"> 本地测试报警: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean2.localTestAlarm?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean2.localTestAlarm)+'</span></div></div></div>'
                                  str+= '<div class="row-item-t"><div class="row-item-2"><label class="row-item__label"> 远程测试报警: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean2.remoteTestAlarm?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean2.remoteTestAlarm)+'</span></div></div>'
                                  str+= '<div class="row-item-2"><label class="row-item__label"> 低压警告免打扰: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean2.lowBNoDisturb?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean2.lowBNoDisturb)+'</span></div></div></div>'
                                  str+= '<div class="row-item-t"><div class="row-item-2"><label class="row-item__label"> 低压警告: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean2.lowBattery?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean2.lowBattery)+'</span></div></div>'
                                  str+= '<div class="row-item-2"><label class="row-item__label"> 本地测试报警: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean2.lifeStop?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean2.lifeStop)+'</span></div></div></div>'
                                  str+= '<div class="row-item-t"><div class="row-item-2"><label class="row-item__label"> 是否是DC设备: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean2.isDC?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean2.isDC)+'</span></div></div>'
                                  str+= '<div class="row-item-2"><label class="row-item__label"> 通讯板与底板通讯异常: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean2.sdcomAbnormal?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean2.sdcomAbnormal)+'</span></div></div></div>'
                                  str+= '<div class="clear"></div>'
                                  str+= '<h3 class="chart-title">GAS状态</h3>'
                                  str+= '<div class="row-item-t"><div class="row-item-2"><label class="row-item__label"> GAS传感器故障免打扰: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean2.gasSensorFaultNoDisturb?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean2.gasSensorFaultNoDisturb)+'</span></div></div>'
                                  str+= '<div class="row-item-2"><label class="row-item__label"> GAS传感器故障: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean2.gasSensorFault?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean2.gasSensorFault)+'</span></div></div></div>'
                                  str+= '<div class="row-item-t"><div class="row-item-2"><label class="row-item__label"> GAS报警静音: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean2.gasilence?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean2.gasilence)+'</span></div></div>'
                                  str+= '<div class="row-item-2"><label class="row-item__label"> GAS报警: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean2.gasAlarm?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean2.gasAlarm)+'</span></div></div></div>'
                                  str+= '<div class="clear"></div>'
                                  str+= '<h3 class="chart-title">CO状态</h3>'
                                  str+= '<div class="row-item-t"><div class="row-item-2"><label class="row-item__label"> CO传感器故障免打扰: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean2.coSensorFaultNoDisturb?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean2.coSensorFaultNoDisturb)+'</span></div></div>'
                                  str+= '<div class="row-item-2"><label class="row-item__label"> CO传感器故障: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean2.coSensorFault?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean2.coSensorFault)+'</span></div></div></div>'
                                  str+= '<div class="row-item-t"><div class="row-item-2"><label class="row-item__label"> CO报警静音: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean2.coSilence?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean2.coSilence)+'</span></div></div>'
                                  str+= '<div class="row-item-2"><label class="row-item__label"> CO报警: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean2.coAlarm?"alarm":"")+'">'+utilsDev.formatDeviceSign(params[0].data[2].updateBean2.coAlarm)+'</span></div></div></div>'
              }else if(params[0].data[2].protocol_Number===3){
                                  str+= '<h3>上报时间:'+utils.timestampToTime(params[0].axisValue)+'</h3>'
                                  str+= '<h3 class="chart-title">公共状态</h3>'
                                  str+= '<div class="row-item-t"><div class="row-item-2"><label class="row-item__label">设备状态: </label><div class="row-item__content-2" ><span class="cicle-pointer '+(params[0].data[2].updateBean3.device_status==7?"":"alarm")+'">'+utilsDev.formatDeviceStatus(params[0].data[2].updateBean3.device_status)+'</span></div></div></div>'
              }

              return str;
            },
        },
        legend: {
          data: ['公共状态('+this.status_bean.public_status+') 烟感状态('+this.status_bean.smoke_status+') GAS状态('+this.status_bean.gas_status+') CO状态('+this.status_bean.co_status + ')']
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          min: 0,
          max: 3,
          minInterval: 1,
          type: 'value',
        },
        series: [
          {
            name: '公共状态('+this.status_bean.public_status+') 烟感状态('+this.status_bean.smoke_status+') GAS状态('+this.status_bean.gas_status+') CO状态('+this.status_bean.co_status + ')',
            type: 'line',
            data: this.status_bean.list,
            itemStyle: {
              normal: {
                color: "#409eff",
                lineStyle: {
                  color: "#409eff"
                }
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    formatTimestamp(row, column) {
      return utils.timestampToTime(row.timestamp);
    },
    async deleteDevice() {
      try {
        await this.$confirm('是否确认注销此设备?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        });
        await deviceService.deleteDevice(this.$route.query.deviceId);
        
        this.$message.success('注销成功！此设备已处于注销状态。。');
      } catch (e) {
        console.error(e);
      }
    },
   async modifyHeartTime () {
      try {
        if (this.heart_time_min_set === 0 && this.heart_time_hour_set === 0 && this.heart_time_day_set === 0) {
          this.$message.error('心跳间隔不能为0');
          return;
        }
        var de = this.heart_time_day_set * 1440 + this.heart_time_hour_set * 60 + this.heart_time_min_set;
        console.log("设置的分钟数为:" + de);
        await deviceDetailService.modifyHeartTime(this.$route.query.deviceId, de);
        this.$message.success('设置成功');
        this.dialogVisibleHeartTime = false;
        this.getDetail();
      } catch (error) {
        console.log(error);
      }
    },
    openHeartTime () {
      this.dialogVisibleHeartTime = true;
    },
    }
}
</script>
<style lang="scss">
.el-carousel__indicators--vertical {
  display: none;
}

.medium {
  line-height: 40px;
}
.happen-img {
  float: left;
}
.happen-img img{
  width: 30px;
  height: 30px;
  margin-top: 2px;
}

p.happen-status{
  float: left;
   margin-left: 10px;
}

.happen-status.alert {
  color: $danger-color;
}
.happen-status.fault {
  color: $warning-color;
}

.info-card-title {
    color: #333;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    height: 18px;
    margin-bottom: 8px;
}

.info-card {
    width: 49%;
    padding-right: 8px;
    min-width: 250px;
    float: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.info-card .info-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.color-container {
    height: 100%;
    background-color: #f5f7fa;
    border-radius: 4px;
    padding: 16px;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 19px;
}

.row-item {
    margin-bottom: 8px;
    overflow: hidden;
}

.dev-status .row-item{
  float: left;
  width: 50%;
}

.row-item .row-item__label {
    text-align: left;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    word-break: break-all;
    color: #999;
    line-height: 18px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100px; 
    color: rgb(153, 153, 153);
}

.row-item-2 {
    width: 50%;
    float: left;
}

.row-item-t {
  width: 350px;
}

.row-item-2 .row-item__label {
    text-align: left;
    vertical-align: middle;
    float: left;
    font-size: 10px;
    word-break: break-all;
    color: #999;
    line-height: 18px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100px; 
    color: white;
}

.cicle-pointer {
    display: inline-block;
    padding: 3px 8px;
    line-height: 16px;
    border-radius: 11px;
    background: rgba(96,172,252,.15);
    font-size: 12px;
    text-align: center;
    color: #60acfc;
}

.cicle-pointer.offline {
  display: inline-block;
    padding: 3px 8px;
    line-height: 16px;
    border-radius: 11px;
    background: rgba(158,158,158,.15);
    font-size: 12px;
    text-align: center;
    color: #9e9e9e;
}

.cicle-pointer.alarm {
  display: inline-block;
    padding: 3px 8px;
    line-height: 16px;
    border-radius: 11px;
    background: rgba(238,96,128, 0.15);
    font-size: 12px;
    text-align: center;
    color: #d22067;
}
.item-chart {
  width:50%;
  height:350px;
  float:left;
}

.el-pagination {
  text-align: center;
  margin-top: 30px;
}
.el-message-box__btns .cancel {
  float: right;
  margin-left: 10px;
}
.row-item__content {
  margin-left: 100px;
}

.row-item__content-2 {
  margin-left: 150px;
}

.chart-title {
  border-bottom: 1px solid white;
}

.dev-pub-status,.dev-smoke-status,.dev-gas-status,.dev-co-status {
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  padding: 10px;
}
</style>